<script setup lang='ts'>
import { PureTableBar } from "@/components/RePureTableBar";
import { useDataManagement } from "./hooks/DataManagement"
const {
  rules,
  CartODB,
  newform,
  columns,
  dataList,
  loading,
  dataLists,
  loadings,
  PINumber,
  statement,
  stubimfrom,
  btnloading,
  DialogVisible,
  SendDataName,
  pagination,
  paginations,
  CartODBData,
  SendDataDate,
  ShowDetails,
  MyDetails,
  SendData,
  SendDatas,
  CloseCartODB,
  close_from,
  stubim_from,
  SendAccredit,
  CloseAccredit,
  handleSizeChange,
  handleSizeChanges,
  handleCurrentChanges,
  handleCurrentChange
} = useDataManagement()
</script>

<template>
  <div class="main">
    <!-- 数据管理 -->
    <el-tabs type="border-card">
      <el-tab-pane label="OBD设备数据">
        <PureTableBar title="" class="list_hei">
          <template #buttons>
            <el-button type="primary" @click="DialogVisible = true"> 申请授权 </el-button>
          </template>
          <template v-slot="{ size, checkList }">
            <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" adaptive :loading="loading"
              size="small" :data="dataList" max-height="650" :columns="columns" :checkList="checkList"
              @size-change="handleSizeChange" @current-change="handleCurrentChange" :pagination="pagination"
              :header-cell-style="{
                background: 'var(--el-table-row-hover-bg-color)',
                color: 'var(--el-text-color-primary)'
              }">
              <template #operation="{ row }">
                <el-button type='primary' size="small" text @click="SendData(row)"
                  :disabled="row.getCar == 7 || row.getCar == 2 || row.getCar == 3 || row.getCar == 4">
                  {{
                    row.getCar == 0 ? '未申请' :
                    row.getCar == 1 ? '已申请' :
                      row.getCar == 2 ? '获取授权' :
                        row.getCar == 3 ? '发出授权声明' :
                          row.getCar == 4 ? '数据授权' :
                            row.getCar == 5 ? '获取授权声明' : '获取OBD数据'
                  }}
                </el-button>
              </template>
            </pure-table>
          </template>
        </PureTableBar>
      </el-tab-pane>
      <el-tab-pane label="健康数据">
        <PureTableBar title="" class="list_hei">
          <template v-slot="{ size, checkList }">
            <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" adaptive :loading="loadings"
              size="small" :data="dataLists" max-height="650" :columns="columns" :checkList="checkList"
              @size-change="handleSizeChanges" @current-change="handleCurrentChanges" :pagination="paginations"
              :header-cell-style="{
                background: 'var(--el-table-row-hover-bg-color)',
                color: 'var(--el-text-color-primary)'
              }">
              <template #operation="{ row }">
                <el-button type='primary' size="small" text @click="SendDatas(row)" :disabled="row.getHealth === 1">
                  {{
                    row.getHealth == null ? '发送申请' :
                    row.getHealth == 0 ? '发送申请' :
                      row.getHealth == 1 ? '已申请' : '查看'
                  }}
                </el-button>
              </template>
            </pure-table>
          </template>
        </PureTableBar>
      </el-tab-pane>
    </el-tabs>
    <!-- 授权申请 -->
    <ReDialog :width="360" :height="200" :models="DialogVisible" @Closes="close_from(stubimfrom)">
      <template #header>
        <h2 style="text-align: center;">申请授权</h2>
      </template>
      <template #main>
        <el-form label-width="100" :model="newform" ref="stubimfrom" :rules="rules">
          <el-form-item label="选择保单" prop="PINumber">
            <el-select v-model="newform.PINumber" filterable placeholder="请选择保单" value-key="id" class="!w-[220px]">
              <el-option v-for="item in PINumber" :key="item.id" :label="item.piNumber" :value="item" />
            </el-select>
          </el-form-item>
          <el-form-item label="申请时间" prop="ApplyTime">
            <el-date-picker v-model="newform.ApplyTime" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
              class="!w-[220px]" />
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <el-button type="primary" @click="stubim_from(stubimfrom)" :loading="btnloading"> 确定 </el-button>
        <el-button @click="close_from(stubimfrom)"> 取消 </el-button>
      </template>
    </ReDialog>
    <!-- 授权声明 -->
    <ReDialog :width="650" :height="500" :models="statement" @Closes="CloseAccredit()">
      <template #header>
        <h2 style="text-align: center;">授权声明</h2>
      </template>
      <template #main>
        <div class="statement">
          <p class="statement_op">
            [授权方名称：{{ SendDataName.piApplicant }} ]（以下简称“授权方”）授权 [授权对象名称：保险公司]（以下简称“授权对象”）处理授权方持有的OBD设备（以下简称“设备”）的数据。
          </p>
          <h3>一、授权范围</h3>
          <dl>
            <dt>授权方授权授权对象在限定时间内处理设备所产生的以下数据类型：</dt>
            <dd>1.车辆故障码；</dd>
            <dd>2.实时监测车辆行驶信息；</dd>
            <dd>3.其他与设备相关的数据。</dd>
            <dd>授权对象不得将授权信息泄露、复制或交给第三方，不得将处理后的数据用于非法用途。</dd>
          </dl>
          <h3>二、授权方式</h3>
          <dd>授权方授权方式为书面形式。授权对象需在授权范围内合规使用数据。</dd>
          <h3>三、保密条款</h3>
          <dd>授权对象需对授权信息进行保密，不得复制、泄露或透露给第三方。</dd>
          <h3>四、违约条款</h3>
          <dl>
            <dd>1.如果授权对象违反授权协议或未履行其义务，授权方有权取消授权</dd>
            <dd>2.如果授权对象造成损失或侵犯他人权益，授权对象需承担相应法律责任。</dd>
            <dd>3.本授权声明自签署日起生效，有效期为 1年，如需续签，请另行申请。</dd>
          </dl>
          <dl class="statement_name">
            <dd>授权时间：<el-date-picker v-model="SendDataDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                :disabled="SendDataName.getCar === 5" />
            </dd>
            <dd>授权方：{{ SendDataName.piApplicant }}</dd>
          </dl>
        </div>
      </template>
      <template #footer>
        <el-button type="primary" @click="SendAccredit()" v-if="!(SendDataName.getCar === 5)" :loading="btnloading"> 确定
        </el-button>
        <el-button @click="CloseAccredit()"> 取消 </el-button>
      </template>
    </ReDialog>
    <!-- 获取OBD设备数据 -->
    <ReDialog :width="650" :height="380" :models="CartODB" @Closes="CloseCartODB()">
      <template #header>
        <h2 style="text-align: center;">车辆ODB数据</h2>
      </template>
      <template #main>
        <p class="odbtime">更新时间:{{ CartODBData.empowerTime }}</p>
        <div class="odb_content">
          <dl class="odb_list" v-for="(item, index) in CartODBData.datas.slice(0, 4)" :key="index">
            <dd>{{ item.name }}</dd>
            <dd>{{ item.value }}</dd>
          </dl>
          <!-- <dl class="odb_list">
            <dd>年龄</dd>
            <dd>{{ CartODBData.applicantAge }}</dd>
          </dl>
          <dl class="odb_list">
            <dd>性别</dd>
            <dd>{{ CartODBData.applicantSex }}</dd>
          </dl>
          <dl class="odb_list">
            <dd>驾龄</dd>
            <dd>{{ CartODBData.drivingExperience }}</dd>
          </dl> -->
        </div>
        <p class="drive_title">驾驶行为监控</p>
        <div class="odb_content">
          <dl class="odb_list" v-for="(item, index) in CartODBData.datas.slice(4, 14)" :key="index">
            <dd>{{ item.name }}</dd>
            <dd>{{ item.value }}</dd>
          </dl>
        </div>
      </template>
      <template #footer>
        <el-button @click="CloseCartODB()"> 关闭 </el-button>
      </template>
    </ReDialog>
    <!-- 查看健康数据 -->
    <ReDialog :width="650" :height="330" :models="ShowDetails" @Closes="ShowDetails = false">
      <template #header>
        <h2 style="text-align: center;">健康数据</h2>
      </template>
      <template #main>
        <p class="odbtime">更新时间:{{ MyDetails.applyTime }}</p>
        <div class="odb_content">
          <dl class="odb_list" v-for="(it, ind) in MyDetails.datas" :key="ind">
            <dd class="line-clamp-1" :title="it.name">{{ it.name }}</dd>
            <dd class="line-clamp-1" :title="it.value">{{ it.value }}</dd>
          </dl>

        </div>
      </template>
    </ReDialog>
  </div>
</template>

<style scoped lang="scss">
@import url(@/style/CreditComm.scss);

// :deep(.list_hei) {
//   .flex {
//     display: none;
//   }
// }

:deep(.el-dialog__footer) {
  text-align: center;
}


:deep(.stubimdialog) {
  border-radius: 10px;
}

.statement_dialog {
  border-radius: 0px !important;
}

.statement {
  text-align: left;
  font-size: 14px;

  h3 {
    line-height: 30px;
  }

  dd {
    line-height: 24px;
    text-indent: 2rem;
  }
}

.statement_name {
  width: 90%;
  margin-top: 10px;
  text-align: right;
}

.odbtime {
  border: 1px solid #ccc;
  line-height: 28px;
  text-align: right;
  padding-right: 10px;
}

.drive_title {
  border: 1px solid #ccc;
  line-height: 28px;
  text-align: left;
  padding-left: 10px;
  font-weight: bold;
}

.odb_content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;

  .odb_list {
    width: 50%;
    text-align: center;
    display: flex;

    dd {
      border: 1px solid #ccc;
      line-height: 28px;
      width: 50%;
      font-size: 14px;

      &:nth-child(1) {
        font-weight: bold;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }

  .line-clamp-1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
  }
}
</style>
